<template>
  <div class="pad-content-box form-no-padding-box">
    <!-- <section class="justify-center padding-10 padding-top-20 padding-bottom-15 border-bottom-D8D8D8">
      <span class="font-size-16 font-weight-bold margin-right-15">收缴统计</span>
    </section>

    <section class="align-center padding-30 border-bottom-D8D8D8">
      <div class="flex-1">
        <div class="font-size-24 color-333333 font-weight-bold text-align-center">{{ statisticsObj.toBeSettledAmount | moneyFilterNoUnit }}<span>元</span></div>
        <div class="font-size-14 color-666666 text-align-center">待结清金额</div>
      </div>
      <div class="line-box"></div>
      <div class="flex-1">
        <div class="font-size-24 color-333333 font-weight-bold text-align-center">{{ statisticsObj.settledAmount | moneyFilterNoUnit }}<span>元</span></div>
        <div class="font-size-14 color-666666 text-align-center">已结清金额</div>
      </div>
      <div class="line-box"></div>
      <div class="flex-1">
        <div class="font-size-24 color-333333 font-weight-bold text-align-center">{{ statisticsObj.outstandingAmount | moneyFilterNoUnit }}<span>元</span></div>
        <div class="font-size-14 color-666666 text-align-center">未出账金额</div>
      </div>
    </section> -->

    <el-tabs class="margin-top-20 has-tab-header-border" v-model="activeTab" @tab-click="tabClick">
      <template v-for="item in typeList">
        <el-tab-pane :key="item.key" :name="item.key" :label="item.name">
          <bill-list :active-tab="item.key" :ref="item.key" :options="options" :asset-type-list="spaceTypeList"></bill-list>
        </el-tab-pane>
      </template>
    </el-tabs>
  </div>
</template>

<script>
  import { apiAssetCodeList, apiCategoryList } from '../../api/gatherManage';
  import { apiConstant, apiClientList, apiContractList, apiChargeList, apiBillCount } from '../../api/billManage';
  import billList from './components/billList.vue';
  import { apiPactConstant } from '@a/index';

  export default {
    name: 'bill',
    data() {
      return {
        activeTab: '1',
        typeList: [
          { key: '1', name: '待结清' },
          { key: '2', name: '已结清' },
          { key: '3', name: '未出账' },
          { key: '4', name: '全部账单' },
          { key: '5', name: '已作废' },
        ],
        statisticsObj: {},
        spaceTypeList: [],
        projectKey:localStorage.getItem("projectKey"),
        options: {
          assetList:[],//资产编码
          brandList:[],//品牌
          clientList:[],//客户
          contractList:[],//合同
          chargeList:[],//非押金
          billTypeNormal:[],//费项非能源费
          billTypeEnergy:[],//费项能源费
          gatherTypeList:[],//收款单类型
          paymentMethodList:[],//收退款方式
        },
      };
    },
    mounted() {
      this.initSonElement();
      this.getBillCount();
      this.getClientList();
      this.getContractList();
      this.getAssetCodeList();
      this.getOperateBrand();
      this.getConstant();
    },
    methods: {
      //常量
      async getConstant() {
        let res = await apiPactConstant();
        this.spaceTypeList = res.spaceType || [];
        this.options.gatherTypeList = res.chargeType || [];
        this.options.billTypeNormal = res.billTypeNormal || [];
        this.options.billTypeEnergy = res.billTypeEnergy || [];
        this.options.chargeList = res.billType2 || [];
        this.options.paymentMethodList = res.actualIncomePaymentMethod || [];
      },

      //选择客户数据源
      async getClientList() {
        let res = await apiClientList();
        this.options.clientList = res.rows || []
      },

      //选择合同数据源
      async getContractList() {
        let res = await apiContractList({projectKey:this.projectKey})
        this.options.contractList = res.rows || []
      },

      //资产codelist
      async getAssetCodeList() {
        let res = await apiAssetCodeList({
          projectKeys: [this.projectKey]
        })
        this.options.assetList = res.rows || []
      },

      //品牌
      async getOperateBrand() {
        let res = await apiCategoryList({
          catalogTypeList: ['brand_child'],
        });
        this.options.brandList = res.rows || []
      },

      //统计
      async getBillCount() {
        let res = await apiBillCount();
        this.statisticsObj = res;
      },

      //切换tab
      tabClick(tab, event) {
        this.activeTab = tab.name;
        this.initSonElement();
      },

      //子组件初始化
      initSonElement() {
        this.$nextTick(() => {
          this.$refs[this.activeTab] && this.$refs[this.activeTab][0].init();
        });
      },
    },
    components: { billList },
  };
</script>

<style lang="scss" scoped>
  .line-box {
    width: 1px;
    height: 44px;
    background: #d8d8d8;
  }

  ::v-deep .has-tab-header-border .el-tabs__header {
    border: none;
  }
</style>
